<template>
	<view class="content_time">
		<!-- 头部标题 -->
		<view class="header">
			<span class="sp center">{{ title }}</span>
			<span class="sp right" @click="sure">确定</span>
		</view>

		<!-- 定时选择 -->
		<view class="timing" v-if="title!='延迟设置'">
			<button class="bt on">定时开启</button>
			<button class="bt off">定时关闭</button>
		</view>

		<!-- 滚动选择器组件 -->
		<picker-view indicator-style="height: 50px" :value="dataObj[usekey].value" @change="bindChange" class="picker-view">
			<!-- 循环渲染每一列选择器 -->
			<picker-view-column v-for="(item, i) in dataObj[usekey].data" :key="i">
				<!-- 渲染每列中的选项 -->
				<view class="item" v-for="(v, j) in item.data" :key="j">{{ v }}</view>
			</picker-view-column>
		</picker-view>

		<!-- 重复设置 -->
		<view class="repeat" v-if="title!='延迟设置'">
			<span class="repeat_left" style="float: left">重复</span>
			<span class="repeat_right" style="float: right">执行一次</span>
		</view>

		<!-- 日期选择设置 -->
		<view class="day" v-if="title!='延迟设置'">
			<view @click="changeBox(item, index)" class="day_info" :class="item.active ? 'act' : 'not_act'" v-for="(item, index) in dayList" :key="index">
				{{ item.title }}
			</view>
		</view>

		<!-- 删除定时 -->
		<view class="del_timing" v-if="Scenario_status"  >删除定时</view>
	</view>
</template>

<script>
// 主要功能说明：
// 这是一个通用的选择器组件，支持日期选择、时间选择和自定义选择
// 通过 usekey 属性控制选择器类型
// 日期选择器默认显示当前日期
// 时间选择器默认显示当前时间
// 选择器值改变时会触发 change 事件，并向父组件传递选中的值

const date = new Date(); // 获取当前日期对象
// 初始化数据数组
const years = []; // 年份数组：1990-当前年
const months = []; // 月份数组：1-12
const days = []; // 日期数组：1-31
const hours = []; // 小时数组：0-23
const minutes = []; // 分钟数组：0-59
const seconds = []; // 秒数数组：0-59

// 生成年份数据
for (let i = 1990; i <= date.getFullYear(); i++) {
	years.push(i);
}
// 生成月份数据
for (let i = 1; i <= 12; i++) {
	months.push(i);
}
// 生成日期数据
for (let i = 1; i <= 31; i++) {
	days.push(i);
}
// 生成小时数据
for (let i = 0; i <= 23; i++) {
	hours.push(i);
}
// 生成分钟数据
for (let i = 0; i <= 59; i++) {
	minutes.push(i);
}
// 生成秒数据
for (let i = 0; i <= 59; i++) {
	seconds.push(i);
}

export default {
	props: {
		// 选择器类型：dateTimeSelect(完整日期时间选择)、 dateSelect(日期选择)、timeSelect(时间选择)、zSelect(自定义选择)
		usekey: {
			type: String,
			default: 'timeSelect'
		},
		title: {
			type: String
		},
		Scenario_status:{
			type: Boolean
		}
	},
	data() {
		return {
			// 选择器配置对象(如果你需要配置增加功能,请在这里配置实现)
			dataObj: {
				// 完整日期时间选择器配置
				dateTimeSelect: {
					data: [{ data: years }, { data: months }, { data: days }, { data: hours }, { data: minutes }],
					value: [years.length - 1, date.getMonth(), date.getDate() - 1, date.getHours(), date.getMinutes()] // 默认值设置为当前日期
				},
				// 日期选择器配置
				dateSelect: {
					data: [{ data: years }, { data: months }, { data: days }],
					value: [years.length - 1, date.getMonth(), date.getDate() - 1] // 默认值设置为当前日期
				},
				// 时间选择器配置
				timeSelect: {
					data: [{ data: hours }, { data: minutes }],
					value: [date.getHours(), date.getMinutes()] // 默认值设置为当前时间
				},
				// 自定义选择器配置
				zSelect: {
					data: [{ data: 300 }, { data: 300 }, { data: 300 }],
					value: [119, 79, 69]
				}
			},
			// 日期时间格式化对象
			dataFormat: {
				year: date.getFullYear(),
				month: date.getMonth() + 1,
				day: date.getDate(),
				hour: date.getHours(),
				minute: date.getMinutes(),
				second: date.getSeconds()
			},
			dayList: [
				{
					active: false,
					title: '日'
				},
				{
					active: false,
					title: '一'
				},
				{
					active: false,
					title: '二'
				},
				{
					active: false,
					title: '三'
				},
				{
					active: false,
					title: '四'
				},
				{
					active: false,
					title: '五'
				},
				{
					active: false,
					title: '六'
				}
			]
		};
	},
	methods: {
		/**
		 * 选择器值改变事件处理
		 * @param {Object} e - 事件对象
		 */
		bindChange(e) {
			const { value } = e.detail;
			// 完整日期时间选择器值改变
			if (this.usekey === 'dateTimeSelect') {
				this.dataFormat.year = years[value[0]];
				this.dataFormat.month = months[value[1]];
				this.dataFormat.day = days[value[2]];
				this.dataFormat.hour = hours[value[3]];
				this.dataFormat.minute = minutes[value[4]];
				// this.$emit('change', this.dataFormat);
			}
			// 日期选择器值改变
			if (this.usekey === 'dateSelect') {
				this.dataFormat.year = years[value[0]];
				this.dataFormat.month = months[value[1]];
				this.dataFormat.day = days[value[2]];
				// this.$emit('change', this.dataFormat);
			}
			// 时间选择器值改变
			else if (this.usekey === 'timeSelect') {
				this.dataFormat.hour = hours[value[0]];
				this.dataFormat.minute = minutes[value[1]];
				// this.$emit('change', this.dataFormat);
			}
			// 自定义选择器值改变
			else if (this.usekey === 'zSelect') {
				const v = value.map((number) => number + 1);
				// this.$emit('change', v);
			}
		},
		// 确定按钮
		sure() {
			const hour = this.dataFormat.hour;
			const minute = this.dataFormat.minute;
			// console.log(hour,minute);
			this.$emit('close', hour, minute);
		},
		// 样式切换，日期选择
		changeBox(item, index) {
			this.dayList.forEach((item, i) => {
				if (i === index) {
					item.active = !item.active;
				} else {
					item.active = false;
				}
			});
			const day = item.title;
			this.$emit('getDay', day);
		}
	}
};
</script>

<style lang="scss" scoped>
.content_time {
	background-color: #f7f9fa;
	height: 100%;
	padding: 0;
}
// 表头设置
.header {
	width: 100%;
	height: 48px;
	position: relative;
	background-color: #fff;
}

.sp {
	position: absolute;
	display: block;
	font-weight: 400;
	font-size: 16px;
}

.center {
	position: absolute;
	top: 13px;
	left: 50%;
	transform: translate(-50%, 0);
}

.right {
	position: absolute;
	color: #00d8af;
	top: 13px;
	right: 16px;
}
.repeat {
	width: 100%;
	height: 48px;
	margin-top: 6px;
	background-color: #fff;
	.repeat_left {
		font-weight: 600;
		font-size: 16px;
		color: #000000;
		margin: 13px 0 0 16px;
	}
	.repeat_right {
		font-weight: 400;
		font-size: 16px;
		color: #999999;
		margin: 13px 16px 0 0;
	}
}
.day {
	width: 100%;
	height: 74px;
	background-color: #fff;
	display: flex;
	justify-content: space-around;
	.day_info {
		margin-top: 12px;
		width: 40px;
		height: 40px;
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-radius: 50%;
		text-align: center;
		line-height: 40px;
	}
}
.act {
	background: #00d8af;
	border: none;
	color: #fff;
}
.not_act {
	border: 1px solid rgba(0, 0, 0, 0.1);
	background: #fff;
	color: #000000;
}
.timing {
	width: 100%;
	height: 82px;
	display: flex;
	justify-content: space-around;
	background-color: #fff;
	.bt {
		margin-top: 12px;
		width: 130px;
		height: 40px;
		border-radius: 20px;
		font-weight: 500;
		font-size: 16px;
		color: #ffffff;
		line-height: 40px;
		border: none;
		&::after {
			border: none;
		}
	}
	.on {
		background: #00d8af;
		color: #fff;
	}
	.off {
		background: #fafafa;
		color: #969696;
	}
}
.del_timing {
	width: 100%;
	height: 48px;
	margin-top: 6px;
	background: #fff;
	font-weight: 400;
	font-size: 16px;
	color: #fa3232;
	text-align: center;
	line-height: 48px;
}

.picker-view {
	width: 100%;
	height: 180px;
	padding: 0 0 20rpx 0;
	background-color: #fff;
}

.item {
	width: 188px;
	line-height: 80rpx;
	text-align: center;
	font-weight: 400;
	font-size: 20px;
	color: #1e1f20;
}
</style>
